<template>
    <div>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="20">
                    <el-tooltip effect="dark" content="刷新" placement="top" :enterable="false">
                        <el-button type="primary" size="small" :icon="icon" @click="getCarouselInfo"></el-button>
                    </el-tooltip>
                    <el-button type="primary" size="small" @click="uploadTarget">新增
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="noticeData"
                      ref="table"
                      border
                      style="width: 100%">
                <el-table-column
                        prop="title"
                        label="名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog :title="title" ref="dialogComponent"
                   :visible.sync="syncDialogVisible"
                   width="50%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="公告名称" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                  <el-button  size="mini" @click="resetForm('ruleForm')">取 消</el-button>
                  <el-button  size="mini" type="primary" @click="saveNotice('ruleForm')">确 定</el-button>
                </span>
            </template>
        </el-dialog>
       
    </div>
</template>

<script>
export default {
    name: "index",
    data(){
        return{
            icon: 'el-icon-refresh',
            syncDialogVisible:false,
            title:'',
            ruleForm: {
                id:0,
                title:'',
            },
            rules:{
                title: [
                    { required: true, message: '请输入公告名称', trigger: 'blur' },
                ],
            },
            upload:{
                url:this.$action_url + 'admin/upload_target',
                name: 'file',
                accept:'image/*',
                headers:{
                    authorization:window.sessionStorage.getItem('token')
                }
            },
            queryInfo:{
                limit: this.$global_limit,
                page: this.$global_page
            },
            total:0,
            noticeData:[],
            edit_id:0,
            edit_path:''
        }
    },
    created() {
        this.getCarouselInfo()
    },
    methods:{
        async getCarouselInfo(){
            const {data: res} = await this.$http.get('admin/get_notice_list', {params: this.queryInfo})
            if (res.code !== 200) return this.$message.error('获取失败')
            this.noticeData = res.data.list
            this.total = res.data.totalCount
        },
        uploadTarget(){
            this.ruleForm = {
                id: 0,
                title: ''
            };
            this.title = "新增公告";
            this.syncDialogVisible = true
            this.$nextTick(() => {
                this.$refs["dialogComponent"].showDialog = true;
            });

        },
        saveNotice(formName){
            this.$refs[formName].validate(async (valid) => {
                if (!valid) return this.$message.error('输入不合法')
                const {data: res} = await this.$http.post('admin/save_notice', this.ruleForm)
                if (res.code !== 200) return this.$message.error(res.data.message)
                this.$message.success("成功")
                this.syncDialogVisible = false
                await this.getCarouselInfo();
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async del(id){
            const configResult = await this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err);
            if (configResult !== 'confirm') return this.$message.info('已取消删除')
            const {data: result} = await this.$http.delete('admin/notice_del/' + id)
            if (result.code !== 200) return this.$message.error(result.data.message)
            this.$message.success('删除成功')
            await this.getCarouselInfo();
        },
        editDialog(row){
            this.title = '编辑公告';
            this.syncDialogVisible = true
            this.$nextTick(() => {
                this.$refs["dialogComponent"].showDialog = true;
            });
            this.ruleForm.id = row.id
            this.ruleForm.title = row.title
        }
    }
}
</script>

<style scoped>

</style>
